<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>flex布局</title>
		<style>
			.bigbox{
				/*设置弹性布局flex*/
				display: flex;
				/*
				决定主轴方向:
				1.row:默认值,水平方向,从左往右
				2.row-reverse:水平方向,从左往右
				3.column:垂直,从上往下
				4.column-reverse:垂直,从下往上
				*/
			   flex-direction: row;
			   /*
			   决定主轴换行:
			   1.nowrap:不换行，默认值
			   2.warp:换行
			   3.warp-reverse:换行且反转
			   */
			   flex-wrap: wrap-reverse;
			   /*复合写法*/
			   flex-flow: row wrap;
			   项目在主轴的排列:justif-content
			   1.flex-start:从主轴的开始位置排,默认值
			   2.flex-end:从主轴的位置排
			   3.center:在主轴上居中
			   4.space:两端对齐,重点
			   justify-content: c;
				width: 1000px;
				height: 600px;
				border: 1px solid gray;
				margin: auto;
			}
			.bigbox div{
				width: 200px;
				height: 200px;
				border: 1px solid red;
				font-size: 34px;
				text-align: center;
				line-height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="bigbox">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
		</div>
	</body>
</html>
